<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04_component_props</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">

    /*
  需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明
    1). 如果性别没有指定, 默认为男
    2). 如果年龄没有指定, 默认为18
    */

    class Person extends React.Component {

        render() {
            const {name, sex, age} = this.props;
            return (
                <ul>
                    <li>名字：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
            )
        }
    }
    Person.defaultProps={
        sex:'男',
        age: 180
    }
    Person.propTypes={
        sex: PropTypes.string.isRequired,
        age:PropTypes.number.isRequired
    }
    // 数据
    const p1 = {name:"海涛",sex:"男", age: 18}
    const p2 = {name:"海涛"}

    // 渲染虚拟dom
    ReactDOM.render(<Person {...p2}/>, document.getElementById("example1"));
    ReactDOM.render(<Person name={p1.name} sex={p1.sex} age={p1.age}/>, document.getElementById("example2"));
</script>